<template>
  <backContainer>
    <card
      :top="24"
      :height="'calc(100vh - 108px)'"
    >
      <div class="title_box">
        <div class="title">错题集</div>
        <el-tooltip
          class="item"
          effect="dark"
          content="重做错题的范围：列表中显示并满足筛选条件的试题"
          placement="top"
        >
          <i class="el-icon-question pointer"></i>
        </el-tooltip>
      </div>
      <div class="main_content">
        <div class="search_collect">
          <div class="search_item">
            <div class="label">题干</div>
            <el-input
              size="small"
              class="value"
              placeholder="请输入题干"
              v-model="query.content"
              clearable
            >
            </el-input>
          </div>
          <div class="search_item">
            <div class="label">题型</div>
            <el-select
              size="small"
              class="value"
              filterable
              v-model.number="query.topicType"
              placeholder="请选择题型"
            >
              <el-option label="全部" value=""/>
              <el-option label="单选题" :value="0"/>
              <el-option label="多选题" :value="1"/>
              <el-option label="判断题" :value="2"/>
              <el-option label="填空题" :value="3"/>
            </el-select>
          </div>
          <div class="search_item">
            <div class="label">试题来源</div>
            <el-select
              size="small"
              class="value"
              filterable
              v-model="query.source"
              placeholder="请选择题型"
            >
              <el-option label="全部" value=""/>
              <el-option label="考核" value="1"/>
              <el-option label="练习" value="3"/>
              <el-option label="作业" value="6"/>
            </el-select>
          </div>
          <div class="search_item" style="height: 54px;">
            <div class="label">知识点</div>
            <el-cascader
              size="small"
              collapse-tags
              :show-all-levels="true"
              placeholder="请选择知识点"
              class="indexId_value"
              v-removeAriaHidden
              v-model="query.indexIds"
              :options="courseIndexTree"
              filterable
              clearable
              :props="{
                  expandTrigger: 'click',
                  checkStrictly: false,
                  emitPath: false,
                  multiple: true,
                  value: 'id',
                  label: 'name'
               }"
            >
            </el-cascader>
            <div class="search_btns">
              <el-button size="small" type="primary" @click="getMistakeTopicList">搜索</el-button>
              <el-button size="small" @click="resetQuery">重置</el-button>
            </div>
          </div>
        </div>
        <div class="table_btns">
          <div @click="redoTopic" class="primary_btn">重做习题</div>
          <div @click="multiDelete" class="del_btn">批量删除</div>
        </div>
        <el-table
          v-loading="loading"
          :data="wrongTopicList"
          ref="multipleTable"
          height="calc(100vh - 446px)"
          @selection-change="handleSelectionChange"
          :header-cell-style="tableHeaderStyle"
          class="cum_table"
          row-key="id"
        >
          <el-table-column type="selection" width="55" align="center"></el-table-column>
          <el-table-column label="题型" width="100" align="center">
            <template slot-scope="scope">
              {{ $store.getters.topicTypeText[scope.row.topicType] }}
            </template>
          </el-table-column>
          <el-table-column label="题干" prop="content" align="left">
            <template slot-scope="scope">
              <div @click="getByEditor(3,scope.row.content)" :class="{'content_html':$isIncludesHtml(scope.row.content)}"
                   class="line_feed w_fixed overTxt"
              >{{ scope.row.content }}
              </div>
            </template>
          </el-table-column>
          <el-table-column label="错题记录" width="100" align="center">
            <template slot-scope="scope">
              <div @click="showDetailDrawer(scope.row)" class="look_info">查看详情</div>
            </template>
          </el-table-column>
          <el-table-column label="操作" width="100" align="center">
            <template slot-scope="scope">
              <svg-icon @click="lookAnalysisDrawer(scope.row)" class-name="noarmal_icon icon_hover pointer" icon-class="wrong_topic_info"/>
              <svg-icon @click="delTopic(scope.row.id)" class-name="del_icon icon_hover pointer" icon-class="wrong_topic_del"/>
            </template>
          </el-table-column>
        </el-table>
        <div class="pagination">
          <pagination
            :iSmanger="false"
            :total="total"
            @pagination="getMistakeTopicList"
            :page.sync="searchModel.pageNum"
            :limit.sync="searchModel.pageSize"
          />
        </div>
        <!--   查看解析抽屉   -->
        <AnalysisDrawer :open.sync="lookAnalysisState" :topic-item="topicItem"></AnalysisDrawer>
        <!--   错题记录抽屉   -->
        <wrongRecordDrawer :open.sync="showDetailState" :course-id="courseId" :topic-id="topicItem.id"></wrongRecordDrawer>
        <!--  编辑弹窗  -->
        <editDrawer title="题干详情" :show.sync="showDrawer" :openType="propOpenType" :propEditorValue="propEditorValue"></editDrawer>
      </div>
    </card>
  </backContainer>
</template>

<script>
import {
  getMistakeIndexsApi,
  getMistakeTopicListApi,
  removeMistakeTopicApi
} from '@/api/ExaminationModule/wrongQuestion'
import AnalysisDrawer from './components/AnalysisDrawer'
import wrongRecordDrawer from './components/wrongRecordDrawer'
import editDrawer from '@/views/tea_course/components/editDrawer'

export default {
  name: 'wrongTopicList',
  components: {
    AnalysisDrawer,
    editDrawer,
    wrongRecordDrawer
  },
  data() {
    return {
      topicItem: {},
      showDetailState: false,
      lookAnalysisState: false,
      loading: false,
      tableHeaderStyle: {
        'background-color': '#f8f8f9',
        'color': '#333333',
        'font-size': '14px',
        'font-family': 'PingFangSC, PingFang SC',
        'font-weight': '400'
      },
      selectionIds: [],
      selectionTopicList: [],
      courseIndexTree: [],
      wrongTopicList: [],
      courseId: '',
      query: {
        content: '',
        topicType: '',
        indexIds: [],
        source: ''
      },
      //富文本录入类型 1：添加 2：编辑 3：查看
      propOpenType: 1,
      //富文本录入抽屉状态
      showDrawer: false,
      //富文本录入组件---内容
      propEditorValue: '',
      total: 0,
      searchModel: {
        pageNum: 1,
        pageSize: 10
      }
    }
  },
  created() {
    this.courseId = this.$route.query.courseId - 0
    this.getCourseIndexTrees()
    this.getMistakeTopicList()
  },
  mounted() {

  },
  methods: {
    //富文本录入
    getByEditor(type, Value) {
      if (type == 3 && !this.$isIncludesHtml(Value)) {
        return
      }
      this.propEditorValue = Value
      this.propOpenType = type
      this.showDrawer = true
    },
    redoTopic() {
      if (this.selectionIds.length == 0) {
        this.$modal.msgWarning('请选择要重做的题目')
        return
      }
      localStorage.setItem('redoTopicList', JSON.stringify(this.selectionTopicList))
      this.$router.push({
        path: '/redoTopicList',
        query: {
          courseId: this.courseId
        }
      })
    },
    showDetailDrawer(row) {
      this.topicItem = row
      this.showDetailState = true
    },
    lookAnalysisDrawer(row) {
      if (row.answerCount == 0 || row.trueCount == 0) {
        row.answerRange = 0
      } else {
        row.answerRange = Math.round((row.trueCount / row.answerCount) * 100).toFixed(2)
      }
      this.topicItem = row
      this.lookAnalysisState = true
    },
    multiDelete() {
      if (this.selectionIds.length == 0) {
        this.$modal.msgWarning('请选择要删除的题目')
        return
      }
      this.$confirm('是否确认移出已选中的错题，移出后将不可恢复？', '移出错题集确认', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.removeMistakeTopic(this.selectionIds.join(','))
      }).catch(() => {
        this.$modal.msgInfo('已取消')
      })
    },
    delTopic(id) {
      this.$confirm('是否确认移出已选中的错题，移出后将不可恢复？', '移出错题集确认', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.removeMistakeTopic(id)
      }).catch(() => {
        this.$modal.msgInfo('已取消')
      })
    },
    async removeMistakeTopic(ids) {
      const loading = this.$loading({
        lock: true,
        text: '正在删除...',
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.3)'
      })
      try {
        let res = await removeMistakeTopicApi(this.courseId, ids)
        const { code } = res
        if (code == 200) {
          this.$modal.msgSuccess('删除成功')
          this.getMistakeTopicList()
        }
      } catch (e) {
        console.log(e)
      } finally {
        loading.close()
      }
    },
    handleSelectionChange(selection) {
      this.selectionTopicList = selection
      this.selectionIds = selection.map((item) => item.id)
    },
    resetQuery() {
      this.query = {
        content: '',
        topicType: '',
        indexIds: [],
        source: ''
      }
      this.getMistakeTopicList()
    },
    //获取知识点列表
    async getCourseIndexTrees() {
      try {
        let res = await getMistakeIndexsApi(this.courseId)
        const { code, data } = res
        if (code == 200) {
          this.courseIndexTree = data
        }
      } catch (e) {
        console.log(e)
      }
    },
    async getMistakeTopicList() {
      this.loading = true
      try {
        let params = {
          ...this.searchModel,
          ...this.query
        }
        params.indexIds = this.query.indexIds.join(',')
        let res = await getMistakeTopicListApi(this.courseId, params)
        const { code, data } = res
        if (code == 200) {
          this.wrongTopicList = data.rows
          this.total = data.total
        }
      } catch (e) {
        console.log(e)
      } finally {
        this.loading = false
      }
    }
  }
}
</script>

<style scoped lang="scss">
@import "../../../assets/styles/mixin.scss";

.title_box {
  width: 100%;
  display: flex;
  align-items: center;
  padding: 24px;
  box-sizing: border-box;
  border-bottom: 1px solid #EDEFF0;

  .title {
    font-family: PingFangSC, PingFang SC, sans-serif;
    font-weight: 600;
    font-size: 18px;
    color: #333333;
  }

  .el-icon-question {
    margin-left: 8px;
    font-size: 14px;
  }

}

.main_content {
  width: 100%;
  padding: 16px 24px;
  box-sizing: border-box;

  .search_collect {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    gap: 16px 80px;

    .search_item {
      display: flex;
      align-items: center;
      gap: 0 16px;

      .label {
        width: 58px;
        text-align: right;
        font-family: PingFangSC, PingFang SC, sans-serif;
        font-weight: 400;
        font-size: 14px;
      }

      .indexId_value {
        width: 220px;
      }

      .value {
        width: 220px;
        height: 32px;
      }
    }
  }

  .table_btns {
    display: flex;
    align-items: center;
    margin-top: 32px;
    gap: 0 20px;

    .primary_btn {
      @include btn_plain(#28B28B, #FFFFFF) {
        width: 80px;
        height: 32px;
        border-radius: 8px;
      }

      &:hover {
        background: #3ac7a0;
      }
    }

    .del_btn {
      @include plain_hover(#FFFFFF, rgba(40, 178, 139, 0.2), #28B28B) {
        width: 80px;
        height: 32px;
        border-radius: 8px;
        color: rgba(0, 0, 0, 0.88);
        border: 1px solid rgba(0, 0, 0, 0.15);
      }

      &:hover {
        border: 1px solid #28B28B;
      }
    }
  }

  .cum_table {
    width: 100%;
    border-radius: 8px;
    border: 1px solid #E8EAEB;
    margin-top: 16px;

    .look_info {
      font-family: PingFangSC, PingFang SC, sans-serif;
      font-weight: 400;
      font-size: 14px;
      color: #4E8DFF;
      cursor: pointer;
      user-select: none;

      &:hover {
        color: #72aaff;
      }

      &:active {
        color: #6380c1;
      }
    }
  }

  ::v-deep .el-table:before {
    height: 0;
  }

  .pagination {
    margin-top: 16px;
    width: 100%;
    display: flex;
    justify-content: flex-end;
  }
}

.noarmal_icon {
  font-family: PingFangSC, PingFang SC, sans-serif;
  font-weight: 500;
  font-size: 24px;
  color: #666666;
  padding: 4px;
  box-sizing: border-box;

  &:hover {
    color: #28B28B;
  }
}

.del_icon {
  font-family: PingFangSC, PingFang SC, sans-serif;
  font-weight: 500;
  font-size: 24px;
  color: #666666;
  padding: 4px;
  box-sizing: border-box;

  &:hover {
    color: #e96060;
  }
}

.icon_hover {
  &:hover {
    background: #e8e8e8;
    border-radius: 6px;
  }
}

.w_fixed {
  width: 100%;
}

.content_html {
  position: relative;
  cursor: pointer;
  height: 100%;

  &:hover {
    user-select: none;

    &:after {
      content: '预览';
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
      border-radius: 4px;
      color: #ffffff;
      background: rgba(0, 0, 0, .2);
    }
  }
}
</style>
